<template>
  <div>
    <div class="index-stock">
      <div style="display: flex; justify-content: space-between">
        <div class="index-stock-title">
          <div class="index-stock-icon"></div>
          <span class="font-black flex items-center">
            <span v-if="label" class="text-[#3070D8]"
              >{{
                (() => {
                  const startIndex = label.indexOf('(')
                  return startIndex !== -1 ? label.substring(0, startIndex).trim() : label
                })()
              }}
              <span class="text-[#333]">概念指数成分股</span>
            </span>
            <span v-else>概念指数成分股</span>
            <span
              @click="changeLabel"
              class="ml-3 text-xs p-1 bg-[#F4FAFF] border-solid border-2 border-[#D4EBFF] rounded flex items-center text-[#3070D8] cursor-pointer"
            >
              <IconCode class="mr-1" />取自{{ currentLabelType }}分类标准
            </span>
          </span>
        </div>
      </div>

      <div class="index-stock-content">
        <div class="index-box" v-for="(item, index) in indexStockList" :key="index">
          <div class="left">
            <div class="num">
              <span>{{ item.stockNum }}</span>
            </div>
            <div class="stock-name">
              <span class="title">{{ item.sConIrdname }}</span>
              <span class="type">{{ item.swIndustryName1 }}</span>
            </div>
          </div>
        </div>
      </div>
      <el-empty description="暂无数据" v-show="indexStockList.length === 0"></el-empty>
    </div>
    <div
      style="
        display: flex;
        justify-content: end;
        margin-top: 16px;
        margin-right: 20px;
        margin-bottom: 20px;
      "
    >
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, inject } from 'vue'
import IconCode from '@/assets/img/code.svg?component'
import { getW1055052 } from '@/api/etfpegging.js'
import { useLabelStore } from '@/stores/etfPeggingStore/labelStore'
const props = defineProps({
  sectcode: { type: String, default: '' },
  label: { type: String, default: '' }, //prop 接收搜索值
})

interface IndexStockItem {
  stockNum: number
  sConIrdname: string
  swIndustryName1: string
  weight: number
}

//大智慧分类标准
const labelStore = useLabelStore()
const emit = defineEmits(['changeLabel'])
// 当前标签
const currentLabelType = ref(props.label.includes('大智慧') ? '大智慧' : '万得')
console.log('当前标签', currentLabelType.value)
watch(
  () => props.label,
  (newLabel) => {
    currentLabelType.value = newLabel?.includes('大智慧') ? '大智慧' : '万得'
  },
  { immediate: true }
)
const changeLabel = () => {
  // 切换当前标签
  currentLabelType.value = currentLabelType.value === '大智慧' ? '万得' : '大智慧'
  labelStore.toggleLabel(currentLabelType.value)
  // 调用接口并传入当前搜索值
  labelStore.fetchW1055046Data(props.label).then((data) => {
    getW1055052Data(data[0]?.sSectcode)
    emit('changeLabel', data[0]?.sSectcode)
  })
}

const indexStockList = ref<IndexStockItem[]>([])

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const formatWeight = (weight: any) => {
  if (!weight) return '--'
  return weight + '%'
}

const getW1055052Data = (sectcode: any) => {
  const params = {
    ssectcode: sectcode,
    currentPage: currentPage.value,
    pageSize: pageSize.value,
  }
  getW1055052(params).then((res: any) => {
    if (res && res.data.records) {
      const records = res.data.records
      indexStockList.value = records.map((item: any, index: number) => ({
        ...item,
        stockNum: (currentPage.value - 1) * pageSize.value + index + 1,
      }))
      total.value = res.data.total
    }
  })
}

const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1 // Reset to first page
  getW1055052Data(props.sectcode)
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getW1055052Data(props.sectcode)
}

watch(
  () => props.sectcode,
  (newVal) => {
    currentPage.value = 1 // Reset page number to 1
    getW1055052Data(newVal)
  },
  { immediate: true },
)
</script>

<style scoped lang="scss">
.index-stock {
  margin: 12px 20px;

  .index-stock-title {
    display: flex;
    align-items: center;
    margin-bottom: 12px;

    .index-stock-icon {
      width: 6px;
      height: 19px;
      background: #2468f2;
      border-radius: 3px;
      margin-right: 8px;
    }

    .font-black {
      font-family: Source Han Sans CN;
      font-size: 18px;
      font-weight: 500;
      color: #000;
    }
  }

  .index-stock-content {
    display: flex;
    flex-wrap: wrap;

    .index-box {
      background: linear-gradient(92.35deg, #ffffff 6.51%, #f8f9ff 98.03%);
      width: 302px;
      height: 74px;
      border-radius: 8px;
      border: 1px solid #dde6f6;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-right: 10px;
      margin-bottom: 10px;

      .left {
        display: flex;
        align-items: center;
        margin-left: 10px;

        .num {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          border-radius: 12px;
          background: #f2f6ff;

          span {
            font-family: Source Han Sans CN;
            font-size: 14px;
            font-weight: 700;
            color: #40527b;
          }
        }

        .stock-name {
          display: flex;
          flex-direction: column;
          margin-left: 10px;
          align-items: center;

          .title {
            font-family: Source Han Sans CN;
            font-size: 16px;
            font-weight: 700;
            color: #000;
          }

          .type {
            font-family: Source Han Sans CN;
            font-size: 14px;
            font-weight: 350;
            color: #7b7f8d;
          }
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 20px;

        .title {
          font-family: Source Han Sans CN;
          font-size: 18px;
          font-weight: 700;
          color: #2468f2;
        }

        .weight {
          font-family: Source Han Sans CN;
          font-size: 14px;
          font-weight: 350;
          color: #7b7f8d;
        }
      }
    }
  }
}
</style>
